$(function () {
  // 1- 渲染左侧一级分类  
  // 2- 渲染右侧二级分类
  // 3- 点击左侧一级分类，切换到对应二级分类 

  // 1- 渲染左侧一级分类 
  //  ajax + 模板引擎
  $.ajax({
    type: 'get',
    url: '/category/queryTopCategory',
    dataType: 'json',
    success: function (res) {
      console.log(res);
      // 渲染
      $('.cate-ul').html(template('tmp-one', res));
    }
  })

  // 2- 渲染右侧二级分类
  // 根据选中一级分类，渲染对应的二级分类 
  // 代码即注释 
  // id： 一级分类id 
  function renderSecondCategoryById (id) {
    $.ajax({
      type: 'get',
      url: '/category/querySecondCategory',
      data: { id: id },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 渲染
        $('.cate-content').html(template('tmp-two', res));
      }
    })
  }

  renderSecondCategoryById(1);

  // 3- 点击左侧一级分类，切换到对应二级分类 
  // 1-点击左侧一级分类， 实现高亮排他效果 
  // 2- 获取一级分类id， 渲染对应的二级分类 
  $('.cate-ul').on('click', 'a', function () {
    // 高亮排他 
    $(this).parent().addClass('current').siblings().removeClass('current');
    // 获取一级分类id， 渲染对应的二级分类
    renderSecondCategoryById($(this).data('id'));
  })


})